<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单的数据操作</title>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css"
            rel="stylesheet"
        />
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app" class="container">
            <form>
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"
                    >
                        <h1>表单的数据操作</h1>
                        <hr />
                        <div class="form-group">
                            <label for="email">Mail</label>
                            <input
                                type="text"
                                id="email"
                                class="form-control"
                                v-bind:value ='userData.email'
                                v-on:input ='userData.email = $event.target.value'
                            />
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input
                                type="password"
                                id="password"
                                class="form-control"
                                v-model.lazy.trim.number = 'userData.password'
                            />
                        </div>
                        <div class="form-group">
                            <label for="age">Age</label>
                            <input
                                type="number"
                                id="age"
                                class="form-control"
                                v-model.number = 'userData.age'
                            />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group"
                    >
                        <label for="message">Message</label><br />
                        <!-- Interpolation between <textarea>{{ test }}</textarea> doesn't work!-->
                        <textarea
                            id="message"
                            rows="5"
                            class="form-control"
                            v-model = 'message'
                        ></textarea>
                    </div>
                </div>
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"
                    >
                        <div class="form-group">
                            <label for="sendmail">
                                <input
                                    type="checkbox"
                                    id="sendmail"
                                    value="SendMail"
                                    v-model="sendMail"
                                />
                                Send Mail
                            </label>
                            <label for="sendInfomail">
                                <input
                                    type="checkbox"
                                    id="sendInfomail"
                                    value="SendInfoMail"
                                    v-model="sendMail"
                                />
                                Send Infomail
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group"
                    >
                        <label for="male">
                            <input type="radio" id="male" value="Male" v-model='gender'/> Male
                        </label>
                        <label for="female">
                            <input type="radio" id="female" value="Female" v-model="gender" />
                            Female
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 from-group"
                    >
                        <label for="priority">Priority</label>
                        <select id="priority" class="form-control"
                        v-model="selectedPriority"
                        >
                            <option 
                            v-for="priority in priorities"
                            :value="priority.value"
                            >{{priorities.text}}</option>
                        </select>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div
                        class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"
                    >
                        <button class="btn btn-primary"
                        @click.prevent = 'submitted'
                        >Submit!</button>
                    </div>
                </div>
            </form>
            <hr />
            <div class="row">
                <div
                    class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"
                >
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4>Your Data</h4>
                        </div>
                        <div class="panel-body">
                            <p>Mail:</p>
                            <p>Password:</p>
                            <p>Age:</p>
                            <p>Message:</p>
                            <p><strong>Send Mail?</strong></p>
                            <ul>
                                <li></li>
                            </ul>
                            <p>Gender:</p>
                            <p>Priority:</p>
                            <p>Switched:</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data:{
                    userData:{
                        email:'china@msn.com',
                        password:'123456',
                        age:18,
                    },
                    message:'文本内容',
                    sendMail:[],
                    gender:'Male',
                    priorities:[
                        {
                            value:'H',
                            text:'High',
                        },
                        {
                            value:"M",
                            text:'Middle',
                        },
                        {
                            value:'L',
                            text:'Low',
                        },
                    ],
                    selectedPriority:'M',
                },
                methods:{
                    submitted() {
                        console.log(this.$data);
                    },
                },
            });
        </script>
    </body>
</html>
